<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="甘忠祥">
    <title>倒计时</title>
    <style>
        body {
		    background: black;
        }
        .heart {
            margin: 100px auto;
            width: 1200px;
            animation-name: shake;
            animation-duration: 1s;
            animation-iteration-count: infinite;
        }
        /* 定义动画 */

        @keyframes shake {
                from {
                        transform: scale(1, 1);
                }
                to {
                        transform: scale(1.1, 1.1);
                }
        }

        #clock{
			width: 500px;
            height: 500px;
            border-radius: 50%;
			margin: 50px auto;
			background-color: #333;
			padding: 5px;
			color: white;
			text-align: center; 
            /* padding-top: 100px; */
            font-size: 30px;
		}
        #clock p{
            position: relative;
            top: 150px;
        }
		span{
			display: inline-block;
			padding: 0 10px;
			margin: 0 10px;
			border: 2px solid #999;
			background-color: #fff;
			color: #000;
        }
        #button{
            width: 510px;
            margin: 0px auto;
            /* background-color: #333; */
            text-align: center;
        }
        #button button{
            border: none;
            width: 200px;
            height: 30px;
            background-color: darkgray;
            border-radius: 10px;
            color: white;

        }
    </style>
</head>

<body>
    <div class="heart">
    <div id="clock">
        <p>距离国庆节还有</p>
		<p><span>00</span>天<span>00</span>时<span>00</span>分<span>00</span>秒</p>
    </div>
    
    </div>
    <div id="button">
        <button type="button" onclick="start()">开始倒计时</button>
        <button type="button" onclick="stop()">暂停倒计时</button>
        
    </div>
</body>
    <script>
        function ShowCountDown(year,month,day){
            var now_time = new Date();
            var target_time = new Date(year, month, day);
            var leftTime=Math.floor((target_time - now_time));
            var dd = parseInt(leftTime / 1000 / 60 / 60 / 24 - 31);//计算剩余的天数
            var hh = parseInt(leftTime / 1000 / 60 / 60 % 24);//计算剩余的小时数
            var mm = parseInt(leftTime / 1000 / 60 % 60);//计算剩余的分钟数
            var ss = parseInt(leftTime / 1000 % 60);//计算剩余的秒数
            var spans = document.querySelectorAll('#clock span');
            var date = [dd,hh,mm,ss];
            for (var i = 0; i < spans.length; i++) {
			    spans[i].innerHTML = checkTime(date[i]);
		    }
        }
        function checkTime(i)
        {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
        var timer = setInterval(show,1000);
        function show(){
            ShowCountDown(2017,10,1);
            }
        var heart = document.querySelector('.heart')
        function stop(){
            clearInterval(timer);
            heart.style.animationName = '';
        }
        function start(){
            timer = setInterval(show,1000);
            heart.style.animationName = 'shake';
        }
    </script>
</html>